<template>
  <div class="member">
    <div class="search" v-bind:class="{'on':isFocus}">
      <i class="icon-search icon-yxq"></i>
      <input type="text" placeholder='搜索成员' v-on:focus="isFocus = true" v-on:blur="isFocus = false">
    </div>

    <ul class="blacklist">
      <router-link to="" tag="li" class="li">
        <a href="#" class="btn btn-blacklist">
          <div class="bl"><i class="icon-blacklist icon-wo"></i></div>黑名单<i class="icon-arrow1"></i>
        </a>
      </router-link>
    </ul>

    <ul class="manager">
      <li class="li title">群主、嘉宾、管理员</li>
      <li class="li">
        <a href="#" class="btn blacklist">
          <div class="img c-testimg"></div>靖观天下<span class="val">群主</span>
        </a>
      </li>
      <li class="li">
        <a href="#" class="btn blacklist">
          <div class="img c-testimg"></div>双面打印<span class="val">管理员</span>
        </a>
      </li>
    </ul>

    <ul class="members">
      <li class="li title">成员</li>
      <router-link to="" tag="li" class="li">
        <a href="#" class="btn blacklist">
          <div class="img c-testimg"></div>靖观天下<i class="icon-more"></i>
        </a>
      </router-link>
      <router-link to="" tag="li" class="li">
        <a href="#" class="btn blacklist">
          <div class="img c-testimg"></div>双面打印<i class="icon-more"></i>
        </a>
      </router-link>
      <router-link to="" tag="li" class="li">
        <a href="#" class="btn blacklist">
          <div class="img c-testimg"></div>靖观天下<i class="icon-more"></i>
        </a>
      </router-link>
      <router-link to="" tag="li" class="li">
        <a href="#" class="btn blacklist">
          <div class="img c-testimg"></div>双面打印<i class="icon-more"></i>
        </a>
      </router-link>
    </ul>

  </div>
</template>

<script>
  export default {
    name: 'home',
    components: {},
    data () {
      return {
        isFocus : false,
      }
    },
    mounted (){

    },
    methods: {}
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../assets/css/common.scss";
	.member{background:#fff; font-size:rem(28);
		.search{padding:rem(23) rem(30); position:relative; margin-bottom:rem(17);
      .icon-search{line-height:rem(60); position:absolute; left:50%; margin-left:rem(-65); color:$black-light;}
      input{text-indent:rem(45); width:100%; border-radius:100px; height:rem(60); line-height:rem(60); border:none; text-align:center; background:#F5F6F7; font-size:rem(24);
      }
      &.on{
        .icon-search{left:8%; margin-left:0;}
        input{text-indent:rem(70); text-align:left;}
      }
    }
    ul{margin-bottom:rem(28); @include border-half-all($border,'bottom');
      .li{height:rem(110); line-height:rem(110); padding:0 rem(30); overflow:hidden;}
      .val,.icon-more,.icon-arrow1{float:right; line-height:rem(110); color:$black-light;}
      .title{font-size:rem(28); color:$black-light; height:rem(40); line-height:rem(40); margin-bottom:rem(5);}
      .img{@include head(70); margin-top:rem(20); margin-right:rem(20);}
    }
    .blacklist{height:rem(110);
      .icon-arrow1{margin-right:rem(-3);}
      .bl{display:inline-block; margin-right:rem(20); vertical-align:middle; margin-top:rem(-5); width:rem(70); height:rem(70); text-align:center; background:$blue; border-radius:10px;
        .icon-blacklist{float:left; width:rem(70); line-height:rem(75); color:#fff; font-size:rem(28);}
      }
    }
    .manager{
      padding-bottom:rem(26);
    }
    .members{
      &:before{
        display: none;
      }
    }
	}
</style>
